
<div class="layui-upload">
    <button type="button" class="layui-btn" id="{{$name}}button">上传图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="{{$name}}image" src="{{asset($value)}}" width="200px" height="auto">
        <p id="{{$name}}Text"></p>
    </div>
    <input type="hidden" name="{{$name}}" id="{{$name}}" >
</div>
<script>

    layui.use('upload',function(){
        var $=layui.jquery,upload=layui.upload;
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        @isset($value)
            $("#{{$name}}").val('{{$value}}');

        @endisset
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#{{$name}}button',
            url: '/admin/image/upload',
            method:'post',
            before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#{{$name}}image').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                if(res.code==undefined){
                    return layer.msg('{{trans('message.system_busy')}}');
                }
                //如果上传失败
                if(res.code > 0){
                    return layer.msg(res.msg);
                }
                //上传成功
                console.log(res.data.src);
                $("#{{$name}}").val(res.data.src);
                return layer.msg(res.msg);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#{{$name}}Text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

</script>